<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter 2.0 - Parsers Globalize</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<style>th { width: 25%; }</style>
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/parsers/parser-globalize.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/event.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/supplemental.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/unresolved.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.js"></script>

	<script id="js">$(function () {

	// data loaded from CLDR (https://github.com/unicode-cldr)
	Globalize.load(data);
	// set up Globalize language per column (only using "en" {English} in this demo)
	var en = Globalize('en');

	$('table').tablesorter({
		theme: 'blue',
		widthFixed: true,
		// globalize options
		globalize: {
			// in v2.24.1, use Globalize to cache the object; lang should only contain the string
			1: { lang : 'en', Globalize : en },
			3: { lang : 'en', Globalize : en, raw: 'MMM d, y G' }
		},
		headers: {
			1: { sorter: 'globalize-number' },
			3: { sorter: 'globalize-date' }
		}
	});

	// *** FOR DEMO ONLY ***
	// add parsed values to Globalize numeric & date columns
	addParsedValues( $( 'table' ), [ 1, 3 ] );

});
</script>
<script>
/* only a small portion of the CLDR JavaScript Library
(https://github.com/unicode-cldr) is included below */
var data = {
	"main": {
		"en": {
			"identity": {
				"version": {
					"_cldrVersion": "25",
					"_number": "$Revision: 91 $"
				},
				"generation": {
					"_date": "$Date: 2014-03-13 22:27:12 -0500 (Thu, 13 Mar 2014) $"
				},
				"language": "en"
			},
			"dates": {
				"calendars": {
					"gregorian": {
						"months": {
							"format": {
								"abbreviated": {
									"1": "Jan",
									"2": "Feb",
									"3": "Mar",
									"4": "Apr",
									"5": "May",
									"6": "Jun",
									"7": "Jul",
									"8": "Aug",
									"9": "Sep",
									"10": "Oct",
									"11": "Nov",
									"12": "Dec"
								}
							}
						},
						"dayPeriods": {
							"format": {
								"wide": {
									"am": "AM",
									"am-alt-variant": "am",
									"noon": "noon",
									"pm": "PM",
									"pm-alt-variant": "pm"
								}
							}
						},
						"eras": {
							"eraAbbr": {
								"0": "BC",
								"0-alt-variant": "BCE",
								"1": "AD",
								"1-alt-variant": "CE"
							}
						},
						"dateFormats": {
							"medium": "MMM d, y"
						},
						"timeFormats": {
							"medium": "h:mm:ss a",
						},
						"dateTimeFormats": {
							"medium": "{1}, {0}",
							"availableFormats": {
								"E": "ccc",
								"EHm": "E HH:mm",
								"EHms": "E HH:mm:ss",
								"Ed": "d E",
								"Ehm": "E h:mm a",
								"Ehms": "E h:mm:ss a",
								"Gy": "y G",
								"GyMMM": "MMM y G",
								"GyMMMEd": "E, MMM d, y G",
								"GyMMMd": "MMM d, y G",
								"H": "HH",
								"Hm": "HH:mm",
								"Hms": "HH:mm:ss",
								"M": "L",
								"MEd": "E, M/d",
								"MMM": "LLL",
								"MMMEd": "E, MMM d",
								"MMMd": "MMM d",
								"Md": "M/d",
								"d": "d",
								"h": "h a",
								"hm": "h:mm a",
								"hms": "h:mm:ss a",
								"ms": "mm:ss",
								"y": "y",
								"yM": "M/y",
								"yMEd": "E, M/d/y",
								"yMMM": "MMM y",
								"yMMMEd": "E, MMM d, y",
								"yMMMd": "MMM d, y",
								"yMd": "M/d/y",
								"yQQQ": "QQQ y",
								"yQQQQ": "QQQQ y"
							}
						}
					}
				},
				"fields": {
					"second": {
						"displayName": "Second",
						"relative-type-0": "now",
						"relativeTime-type-future": {
							"relativeTimePattern-count-one": "in {0} second",
							"relativeTimePattern-count-other": "in {0} seconds"
						},
						"relativeTime-type-past": {
							"relativeTimePattern-count-one": "{0} second ago",
							"relativeTimePattern-count-other": "{0} seconds ago"
						}
					}
				}
			},
			"numbers": {
				"currencies": {
					"USD": {
						"symbol": "$"
					}
				},
				"defaultNumberingSystem": "latn",
				"symbols-numberSystem-latn": {
					"decimal": ".",
					"exponential": "E",
					"group": ",",
					"infinity": "∞",
					"minusSign": "-",
					"nan": "NaN",
					"percentSign": "%",
					"perMille": "‰",
					"plusSign": "+",
					"timeSeparator": ":"
				},
				"decimalFormats-numberSystem-latn": {
					"standard": "#,##0.###"
				},
				"currencyFormats-numberSystem-latn": {
					"currencySpacing": {
						"beforeCurrency": {
							"currencyMatch": "[:^S:]",
							"surroundingMatch": "[:digit:]",
							"insertBetween": " "
						},
						"afterCurrency": {
							"currencyMatch": "[:^S:]",
							"surroundingMatch": "[:digit:]",
							"insertBetween": " "
						}
					},
					"standard": "¤#,##0.00"
				}
			}
		}
	},
	"supplemental": {
		"version": {
			"_cldrVersion": "25",
			"_number": "$Revision: 91 $"
		},
		"currencyData": {
			"fractions": {
				"DEFAULT": {
					"_rounding": "0",
					"_digits": "2"
				}
			}
		},
		"timeData": {
			"001": {
				"_allowed": "H h",
				"_preferred": "H"
			}
		},
		"likelySubtags": {
			"en": "en-Latn-US",
		},
		"plurals-type-cardinal": {
			"en": {
				"pluralRule-count-one": "i = 1 and v = 0 @integer 1",
				"pluralRule-count-other": " @integer 0, 2~16, 100, 1000, 10000, 100000, 1000000, … @decimal 0.0~1.5, 10.0, 100.0, 1000.0, 10000.0, 100000.0, 1000000.0, …"
			}
		}
	}
};
</script>
</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Parsers Globalize</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p class="tip">
		<em>NOTE!</em>
	</p>
	<ul>
		<li>In <span class="version updated">v2.24.1</span>,
			<ul>
				<li>An internal change made it necessary to change the <code>lang</code> option to only hold a string of the set language.</li>
				<li>To cache the Globalize object, save it as a <code>Globalize</code> option (see code example below).</li>
			</ul>
		</li>
		<li><a href="https://github.com/jquery/globalize">jQuery Globalize</a> supports the parsing of locale specific data, including <a href="https://github.com/jquery/globalize/blob/master/doc/api/number/number-parser.md">numerous number formats</a> (including Arabic, Chinese &amp; Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li>
		<li>This is a very basic example using English only. For another example, see the <a href="example-parsers-dates.html">weekday &amp; month parsers</a>.</li>
		<li>For more details on how to set up Globalize, see the <a href="example-widget-grouping.html#globalization">Grouping widget documentation about Globalization</a>.</li>
	</ul>

	<h1>Demo</h1>
	<div id="demo"><button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column

<table class="tablesorter">
	<thead>
		<tr><th>AlphaNumeric</th><th>Numeric (Globalize)</th><th>Animals</th><th>Date (Globalize)</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>abc 123</td><td>12,735.00</td><td>Koala</td><td>Jan 22, 2015 AD</td></tr>
		<tr><td>abc 1</td><td>65.34</td><td>Ox</td><td>Mar 30, 2015 AD</td></tr>
		<tr><td>abc 9</td><td>∞</td><td>Girafee</td><td>Dec 31, 2014 AD</td></tr>
		<tr><td>zyx 24</td><td>-∞</td><td>Bison</td><td>Apr 13, 2015 AD</td></tr>
		<tr><td>abc 11</td><td>0.44</td><td>Chimp</td><td>Oct 31, 2015 AD</td></tr>
		<tr><td>abc 2</td><td>5.6</td><td>Elephant</td><td>May 3, 2015 AD</td></tr>
		<tr><td>abc 9</td><td>1,345,155</td><td>Lion</td><td>Jun 30, 2014 AD</td></tr>
		<tr><td>ABC 10</td><td>2,875.33</td><td>Zebra</td><td>Feb 14, 2015 AD</td></tr>
		<tr><td>zyx 1</td><td>99.9</td><td>Koala</td><td>Mar 20, 2015 AD</td></tr>
		<tr><td>zyx 12</td><td>1.2</td><td>Llama</td><td>Mar 2, 2015 AD</td></tr>
	</tbody>
</table>
</div>

	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>
	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

</div>

</body>
</html>
